<template>
  <div class="wrap" :style="{ width }">
    <img
      class="up"
      src="https://img12.360buyimg.com/pop/jfs/t1/221226/40/7445/29056/61cabc77Ee0c88e69/e762bacc99307f5c.png.webp"
    />
    <span @click="close">关闭</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      width: "105px",
    };
  },
  methods: {
    show() {
      this.width = "1051px";
    },
    close() {
      this.width = "105px";
    },
  },
  mounted() {
    const wrap = document.querySelector(".wrap");
    wrap.addEventListener("mouseenter", this.show);
    wrap.addEventListener("mouseleave", this.close);
  },
};
</script>
<style lang="css" scoped>
.wrap {
  transition-duration: 0.5s;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  border-radius: 45px 0 0 45px;
  background-color: black;
  position: absolute;
  left: 18px;
  top: 52px;
  width: 105px;
  height: 455px;
  /* 层级 */
  z-index: 999;
  background-image: url(https://img13.360buyimg.com/pop/jfs/t1/202793/36/20324/119719/61cabc7eE0102dbe6/dc3efedf4d4cd5de.jpg.webp);
  background-repeat: no-repeat;
  background-position: 261px 0;
}
.up {
  position: absolute;
  left: -164px;
  height: 100%;
  float: left;
}
.down {
  width: 100px;
  float: left;
  background-color: red;
}
span {
  color: white;
  position: absolute;
  bottom: 15px;
  right: 15px;
  opacity: 0;
  transition-duration: 0.5s;
}
/* .wrap:hover {
  width: 1043px;
  transition-duration: 0.5s;
} */
.wrap:hover span {
  opacity: 1;
  transition-duration: 0.5s;
}
</style>
